<template>
	<view class="register">
	
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput
					v-model="formData.username"
					type="text"
					placeholder="用户名"
				></wInput>
				<wInput
					v-model="formData.email"
					type="text"
					placeholder="邮箱"
				></wInput>
				<wInput
					v-model="formData.password"
					type="password"
					maxlength="20"
					placeholder="登录密码"
					isShowPass
				></wInput>
				<wInput
					v-model="formData.confirmPassword"
					type="password"
					maxlength="20"
					placeholder="确认密码"
					isShowPass
				></wInput>
			</view>
				
			<wButton 
				class="wbutton"
				text="注 册"
				:rotate="isRotate" 
				@click.native="handleRegister"
			></wButton>
			
			<!-- 底部信息 -->
			<view class="footer">
				<text 
					@tap="isShowAgree" 
					class="cuIcon"
					:class="showAgree?'cuIcon-radiobox':'cuIcon-round'"
				> 同意</text>
				<!-- 协议地址 -->
				<navigator url="" open-type="navigate">《协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import { register } from '../../common/api.js';
	
	export default {
		data() {
			return {
				//logo图片 base64
				logoImage:'https://tse3-mm.cn.bing.net/th/id/OIP-C.kIOpUu_8orw9pUvKF22LRgAAAA?w=191&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7', 
				formData: {
					username: '',
					email: '',
					password: '',
					confirmPassword: ''
				},
				showAgree:true, //协议是否选择
				isRotate: false, //是否加载旋转
			}
		},
		components:{
			wInput,
			wButton,
		},
		mounted() {
			_this= this;
		},
		methods: {
			isShowAgree(){
				//是否选择协议
				_this.showAgree = !_this.showAgree;
			},
			async handleRegister() {
				// 判断是否加载中
				if(this.isRotate) {
					return false
				}
				
				// 验证协议
				if (!this.showAgree) {
					uni.showToast({
						title: '请先同意《协议》',
						icon: 'none',
						position: 'bottom'
					})
					return false
				}
				
				// 表单验证
				if (!this.formData.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none',
						position: 'bottom'
					})
					return false
				}
				
				if (!this.formData.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none',
						position: 'bottom'
					})
					return false
				}
				
				// 邮箱格式验证
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
				if (!emailRegex.test(this.formData.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none',
						position: 'bottom'
					})
					return false
				}
				
				if (!this.formData.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						position: 'bottom'
					})
					return false
				}
				
				if (this.formData.password.length < 6) {
					uni.showToast({
						title: '密码长度不能小于6位',
						icon: 'none',
						position: 'bottom'
					})
					return false
				}
				
				if (this.formData.password !== this.formData.confirmPassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none',
						position: 'bottom'
					})
					return false
				}
				
				// 开始注册
				this.isRotate = true
				try {
					const result = await register(
						this.formData.username,
						this.formData.password,
						this.formData.email
					)
					
					if (result.code === 200) {
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						})
						// 延迟跳转到登录页
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: result.message || '注册失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.showToast({
						title: error.message || '注册失败，请重试',
						icon: 'none'
					})
					console.error('注册错误:', error)
				} finally {
					this.isRotate = false
				}
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
</style>